<template>
  <view class="tab-container">
    <view class="tab-all">
      <view class="tabs">
        <!-- 循环渲染每个标签 -->
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab', { active: currentTab === index }]"
          @click="switchTab(index)"
        >
          <!-- 标签图标 -->
          <image :src="tab.icon" class="tab-icon" />
          <!-- 标签文字 -->
          <view class="tab-text">{{ tab.label }}</view>
        </view>
      </view>
    </view>
    <view class="content">
      <!-- 根据 currentTab 显示不同的内容 -->
      <view v-if="currentTab === 0">
        <view class="signup">
          <SignUp></SignUp>
        </view>
      </view>
      <view v-if="currentTab === 1">
        <view class="ended">
          <Ended></Ended>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
export default {
  onShareAppMessage(options) {
    const pages = getCurrentPages(); // 获取当前页面栈
    const currentPage = pages[pages.length - 1]; // 获取当前页面的定义信息
    return {
      title: "当前页面分享标题", // 根据实际情况设置分享标题
      path: "/pages/index/activity/index", // 当前页面路径，必须带参数
      imageUrl: "", // 图片路径可以与全局设置相同，也可以自定义
    };
  },
};
</script>

<script setup lang="ts">
import { ref } from "vue";
import SignUp from "../components/signup.vue";
import Ended from "../components/Ended.vue";

// 当前选中的标签索引
const currentTab = ref(0);

// 标签数据
const tabs = [
  {
    label: "进行中",
    icon: "/static/images/progress_icon.png",
  },
  {
    label: "已结束",
    icon: "/static/images/ended_icon.png",
  },
];

// 切换标签的函数
const switchTab = (index: number) => {
  currentTab.value = index;
};
</script>

<style scoped>
.tab-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.tab-all {
  width: 695rpx;
  height: 186rpx;
  background-color: #ffffff;
  border-radius: 6%;
  margin-top: 10%;
  max-width: 90%;
  margin-left: 5%;
}

.tabs {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0 auto;
  padding: 0;
  background-color: #ffffff;
  border-radius: 6%;
}

.tab {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem;
  position: relative;
  flex: 1;
}

.tab-text {
  height: 25rpx;
  font-family: FZHei-B01S;
  font-weight: 400;
  font-size: 27rpx;
  color: #221815;
}

.tab-icon {
  border-radius: 50%;
  width: 92rpx;
  height: 94rpx;
}

.tab.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #ec7496;
  border-radius: 40%;
  width: 41rpx;
  height: 8rpx;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.signup,
.ended {
  width: 94%;
  padding: 1.2rem;
  border-radius: 6%;
  margin-top: 5%;
  margin-left: 5%;
  background-color: #ffffff;
}
</style>
